<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../dist/css/cart-index.min.css">
    <!-- <link rel="stylesheet" href="../css/cart-index.min.css"> -->
    <link rel="stylesheet" href="../../dist/css/cart-reset.min.css">
    <!-- <link rel="stylesheet" href="../css/cart-reset.min.css"> -->
</head>

<body>
    <div class="top">
        <ul class="left-content">
            <a href="javascript:;">关注</a>
            <a href="javascriot:;" class="left-content-a">下载APP</a>
        </ul>
        <ul class="right-content">
            <li class="right-content-1" id="header" style="width: 150px;">
                <a href="./login.html">登录</a>
                &nbsp;/&nbsp;
                <a href="./signup.html">注册</a>
            </li>
            <li class="right-content-2">
                <span>💝</span>
                <a href="javascript:;">收藏</a>
            </li>
            <li class="right-content-3">
                &#128545
                <a href="../../dist/html/login.html"></a>
                <a href="javascript:;">购物袋</a>
            </li>
            <li class="right-content-4">
                <a href="javascript:;">公告</a>
            </li>
        </ul>
    </div>
    <div class="cart-conter">
        <a href="javascript:;">
            <img src="../img/cart-logo-yg.jpg " alt="">优生活，购时尚！
        </a>
        <ul class="cart-cul">
            <li>我的购物袋</li>
            <li>提交订单中心</li>
            <li>成功提交订单</li>
        </ul>
    </div>




    <!-- 购物车商品 -->
    <section class="cartMain">
        <!-- 购物车商品 -->
        <div class="cart-goods">
            <!-- 默认购物车样式 -->
            <div class="cart-goods-default">
                <div class="cart-goods-left"><img src="../img/cart01.jpg" alt=""></div>
                <div class="cart-goods-right">
                    <p class="cart-p">您的购物车中暂无商品，赶快选择心爱的商品吧！</p>
                    <p><a href="../index.html">回到首页</a></p>
                    <p class="cart-g-rp">您可以：</p>
                    <p class="cart-g-rp">查看我的收藏夹</p>
                    <p class="cart-g-rp">查看我已购买的商品</p>
                </div>
            </div>
        </div>
        <div class="cartMain_hd">
            <ul class="order_lists cartTop">
                <li class="list_chk">
                    <!--所有商品全选-->
                    <input type="checkbox" id="all" class="whole_check">
                    <label for="all"></label>
                    全选
                </li>
                <li class="list_con">商品信息</li>
                <li class="list_info">商品参数</li>
                <li class="list_price">单价</li>
                <li class="list_amount">数量</li>
                <li class="list_sum">小计</li>
                <li class="list_op">操作</li>
            </ul>
        </div>
        <div class="cartBox">
            <div class="order_content">
                <ul class="order_lists">
                    <li class="list_chk">
                        <input type="checkbox" id="checkbox_2" class="son_check">
                        <label for="checkbox_2"></label>
                    </li>

                    <li class="list_con">
                        <div class="list_img"></div>
                        <div class="list_text"></div>
                    </li>
                    <li class="list_info list_info1">

                    </li>
                    <li class="list_price list_price1">

                    </li>
                    <li class="list_amount">
                        <div class="amount_box">
                            <a href="javascript:;" class="reduce reSty">-</a>
                            <input type="text" value="1" class="sum">
                            <a href="javascript:;" class="plus">+</a>
                        </div>
                    </li>
                    <li class="list_sum list_sum1">

                    </li>
                    <li class="list_op">
                        <p class="del" style="text-align: left;"><a href="javascript:;">移入收藏夹</a></p>
                        <p class="del"><a href="javascript:;" class="delBtn">删除</a></p>
                    </li>
                </ul>

            </div>
            <div class="all_check" id="all_a">
                <!--店铺全选-->
                <input type="checkbox" id="shop_a" class="shopChoice">
                <label for="shop_a" class="shop"></label>
                <span class="shop-span1">全选</span>
                <span class="shop-span1"><a href="javascript:;">移入收藏夹</a></span>
                <span><a href="javascript:;" class="cart_del1">删除</a></span>
            </div>
        </div>


        <!--底部-->
        <div class="bar-wrapper">
            <div class="bar-right">
                <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
                <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
                <div class="calBtn"><a href="javascript:;">结算</a></div>
            </div>
        </div>
    </section>
    <section class="model_bg"></section>
    <section class="my_model">
        <p class="title">删除宝贝<span class="closeModel">X</span></p>
        <p>您确认要删除该宝贝吗？</p>
        <div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;"
                class="dialog-close">关闭</a></div>
    </section>
    <!-- 购物保障 -->
    <div class="cart-bz">
        <p>购物保障： <span>㊣</span>100%正品 <span>✈</span> 10天退换货 <span>💸</span> 10天补差价</p>
        <p>优惠券/礼品卡在下一步使用</p>
        <p>帮助我们改进购物流程</p>
    </div>
    <!-- 商品推荐 -->
    <div class="cart-goods-remd">
        <p>购买了您购物袋中商品的顾客还买了</p>
        <div class="cart-remd-div">
            <div>第1页，共 0 页</div>
            <div><a href="javascript:;">&lt;</a></div>
            <div><a href="javascript:;">&gt;</a></div>
        </div>
    </div>
    <div class="footer">
        <p>Copyright © 2011-2014 Yougou Technology Co., Ltd. 粤ICP备09070608号-4 增值电信业务经营许可证：粤 B2-20090203</p>
    </div>
    <script src="../../dist/js/cart-jquery-1.12.4.min.min.js"></script>
    <script src="../../dist/js/cart-cookie.min.js"></script>
    <script src="../../dist/js/cart.min.js"></script>
    <script src="../../dist/js/cooke.min.js"></script>
    <script src="../../dist/js/cart1.min.js"></script>


    <script>
        let cookie_str = cookie.get('mallproducts') ? cookie.get('mallproducts') : '';
        let cookie_obj = cookie.convertStrToObj(cookie_str);
        let cart_goods = document.querySelector('.cart-goods');
        let cartMain_hd = document.querySelector('.cartMain_hd');
        let order_content = document.querySelector('.order_content');
        let bar_wrapper = document.querySelector('.bar-wrapper');
        let all_a = document.querySelector('#all_a');
        for (let good_id in cookie_obj) {
            let good = cookie_obj[good_id];
            let ul = document.querySelector('.order_lists');
            let o_name = document.querySelector('.list_text');
            let o_img = document.querySelector('.list_img');
            let o_color = document.querySelector('.list_info1');
            let o_price = document.querySelector('.list_price1');
            let o_sum1 = document.querySelector('.list_sum1');
            o_name.innerHTML = `<a href="javascript:;">${good.name}</a>`;
            o_img.innerHTML = `<a href="javascript:;"><img src=${good.src} alt=""></a>`;
            o_color.innerHTML = `<p>颜色：${good.color}</p>
                                <p>尺寸：${good.size}</p>`;
            o_price.innerHTML = `<p class="price">${good.price}</p>`;
            o_sum1.innerHTML = `<p class="sum_price">${good.price}</p>`

        }
        if (cookie.get('mallproducts')) {
            cart_goods.style.display = 'none';
        } else {
            cartMain_hd.style.display = 'none';
            cart_goods.style.display = 'block';
            order_content.style.display = 'none';
            all_a.style.display = 'none';
            bar_wrapper.style.display = 'none';
        }
        
    </script>
</body>

</html>